<template>
	<!-- 
	swiper中的transfrom会使fixed失效,此时用height="100%"固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
	 <mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" height="100%" :top="listTop" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
		<!-- 数据列表 -->
		<!-- <good-list :list="goods"></good-list> -->
		
	  <view>
	  	<view v-for="(item, index) in 15" :key="index"  >
	  		 <view class="shop-row">
	  		 	<view class="shop-row-info-box" >
	  		 		<view class="shop-box-item-left" >
	  		 			<image
	  		 				:src="'/static/logo.png'"
	  		 				mode="aspectFill"
	  		 				@error="'/static/logo.png'">
	  		 			</image>
	  		 		</view>
	  		 		<view class="shop-box-item-center">
	  		 			<text class="title">张希宇</text>
	  					<text class="sub">张希宇</text>
	  		 		</view>
	  		 		<view class="shop-box-item-right">
	  		 			 <view class="btn"> 
	  						<text>选择</text>
	  						
	  					 </view>
	  					 <view class="btn">
	  					 	<text>释放</text>
	  					 </view>
	  		 		</view>
	  		 	</view>
	  			<view class="shop-row-info-line"></view>
	  		 </view>
	  	</view>
	  </view>
	  <view v-if="goodsList.length == 0 && emptyShow"><ns-empty text="暂无商品"></ns-empty></view>
	  
	</mescroll-uni>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";

	
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				emptyShow:false,
				pagenum:1,
				pagesize:10,
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无商品 ~', // 提示
						btnText: '去逛逛'
					}
				},
				categoryId:'',
				goodsList: [] //列表数据
			}
		},
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default(){
					return []
				}
			},
			isList: {
				type: Boolean,
				default(){
					return false
				}
			},
			listTop: {
				type: Number,
				default(){
					return 180
				}
			},
			skeyword: { 
				type: String,
				default(){
					return ''
				}
			},
			 
			minPrice: {
				type: String,
				default(){
					return ''
				}
			},
			maxPrice: {
				type: String,
				default(){
					return ''
				}
			},
			isFreeShipping: {
				type: Boolean,
				default(){
					return false
				}
			},
			order: {
				type: String,
				default(){
					return ''
				}
			},
			sort: {
				type: String,
				default(){
					return ''
				}
			},
			coupon: {
				type: Number,
				default(){
					return 0
				}
			},
			categoryModel: {
				type: Object,
				default(){
					return 
				}
			},
		},
		watch: {
			
			skeyword(newVal, oldVal) {
				if (newVal) {
					 console.log(newVal)
					 // this.mescroll.resetUpScroll()
				}
			}
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				// console.log('..........')
				// console.log(this.i)
				// this.categoryId = this.categoryModel.child_list[this.i].category_id;
				// this.pagenum = 1;
				// this.pagesize = 1;
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				console.log(this.i)
				if(this.tabs.length > 0){
					let keyword = this.tabs[this.i].name
				}
				// console.log()
				if(this.categoryModel != undefined && this.categoryModel.child_list != undefined){
					this.categoryId = this.categoryModel.child_list[this.i].category_id;
				}
				this.pagenum = page.num;
				this.pagesize = page.size;
 
				this.getGoodsListData();
				// console.log(this.categoryId)
				// apiSearch(page.num, page.size, keyword).then(curPageData=>{
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	this.mescroll.endSuccess(curPageData.length);
				// 	//设置列表数据
				// 	if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
				// 	this.goods=this.goods.concat(curPageData); //追加新数据
				// }).catch(()=>{
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
				 
			},
			//点击空布局按钮的回调
			emptyClick(){
				// this.$util.redirectTo('/pages/index/index/index', {}, 'redirectTo');
				// uni.showToast({
				// 	title:'点击了按钮,具体逻辑自行实现'
				// })
			},
			getGoodsListData(type) {
				// console.log(type)
				var data = {
					page: this.pagenum,
					page_size: this.pagesize,
					keyword: this.skeyword,
					category_id: this.categoryId,
					min_price: this.minPrice,
					max_price: this.maxPrice,
					is_free_shipping: (this.isFreeShipping ? 1 : 0),
					order: this.order,
					sort: this.sort,
					coupon: this.coupon,
				}
				console.log(data)
				// this.$api.sendRequest({
				// 	url: '/api/goodssku/page',
				// 	data: data,
				// 	success: res => {
				// 		// console.log(res)
				// 		console.log('=========')
				// 		let newArr = []
				// 		let msg = res.message;
				// 		if (res.code == 0 && res.data) {
				// 			if (res.data.page_count == 0) {
				// 				this.emptyShow = true
				// 			}
				// 			newArr = res.data.list;
				// 		} else {
				// 			this.$util.showToast({
				// 				title: msg
				// 			})
				// 		} 
				// 		console.log(this.mescroll)
				// 		this.mescroll.endSuccess(newArr.length);
				this.mescroll.endSuccess();
				// 		// mescroll.endSuccess(newArr.length); 
				// 		//设置列表数据
				// 		if (this.pagenum == 1) this.goodsList = []; //如果是第一页需手动制空列表
				// 		this.goodsList = this.goodsList.concat(newArr); //追加新数据
				// 		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				// 	},
				// 	fail: res => {
				// 		// console.log(res)
				// 		//联网失败的回调
				// 		// mescroll.endErr();
				// 		this.mescroll.endErr();
				// 		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				// 	}
				// });
				
					 
			},
			toDetail(item) {
				// console.log(item)
				// this.$util.redirectTo('/pages/goods/detail/detail', {
				// 	sku_id: item.sku_id,
				// });
				// this.$util.redirectTo('/goodspages/goods/detail/addcart', {
				// 	sku_id: item.sku_id
				// });
			},
			goodsImg(imgStr) {
				let imgs = imgStr.split(',');
				return imgs[0] ? this.$util.img(imgs[0], {
					size: 'mid'
				}) : this.$util.getDefaultImage().default_goods_img;
			},
			goodsTag(data) {
				switch (data.recommend_way) {
					case 1:
						return '新品';
						break;
					case 2:
						return '精品';
						break;
					case 3:
						return '推荐';
						break;
					default:
						return '';
				}
			},
			showPrice(data) {
				// let price = data.discount_price;
				let price = data.price;
				if (data.member_price && parseFloat(data.member_price) < parseFloat(price)){
					price = data.member_price;
				} 
				return price;
			},
			imgError(index) {
				this.goodsList[index].goods_image = this.$util.getDefaultImage().default_goods_img;
			},
		}
	}
</script>
 
<style lang="scss"> 
// @import '../public/css/list.scss';
</style>